<template>
	<div class="login">
		<div class="login-box">
			<div class="login-title">{{ title }}</div>

			<!-- 登录表单 -->
			<el-form ref="loginFormRef" :model="loginForm" class="login-form">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" placeholder="账号">
						<i slot="prefix" class="el-input__icon el-icon-user"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" placeholder="密码">
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="code" class="imageBox">
					<el-input v-model="loginForm.code" type="code" placeholder="验证码">
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
					<div class="image">
						<img :src="image" width="110" height="36" alt="" />
					</div>
				</el-form-item>
			</el-form>
			<div class="submitBtn">
				<el-button type="primary" @click="login" style="width: 100%; background-color: #2f9688; border-color: #2f9688">登 录</el-button>
			</div>
		</div>
		<!-- 备案信息 -->
		<!-- <div class="beian">Copyright © 2021-2022 weibo <a href="#"> 渝ICP195002365-2</a></div> -->
	</div>
</template>

<script>
import { login } from "../api/user";
export default {
	name: "Login",
	data() {
		return {
			title: "Vue2 Admin Template",
			loginForm: {
				username: "admin",
				password: "123456",
				uuid: "",
				code: ""
			},
			image: null
		};
	},
	methods: {
		async login() {
			// const res = await login(this.loginForm);
			// const token = res.data.token;
			// this.$store.commit("user/SET_TOKEN", token);
			this.$store.commit("user/SET_TOKEN", 'weibo-token');
			this.$message.success("登录成功");
			this.$router.push("/index").catch(() => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100%;
	background-color: #393d49;
}
.login-box {
	width: 450px;
	height: 380px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.beian {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #999;
	font-size: 14px;
}

.login-title {
	text-align: center;
	font-size: 26px;
	color: #fff;
	margin-bottom: 25px;
}
.login-form {
	margin: 30px 0;
}
</style>
<style lang="scss">
.login {
	.el-form-item__label {
		color: #fff;
	}
	.el-input--prefix .el-input__inner {
		padding-left: 36px;
	}
	.el-input__inner {
		color: #fff;
		background-color: #323540;
		// background-color: #2f9688;
		border-color: #4c4c4e;
	}
	.imageBox .el-form-item__content {
		display: flex;
		justify-content: space-between;
		.image {
			height: 36px;
			padding-left: 15px;
			padding-top: 2px;
			cursor: pointer;
		}
	}
}
</style>
